<template>
  <div>
    <van-form>
      <van-nav-bar
          right-text="注册账号>>"
          @click-right="tzreg()"
      />
      <div id="dvl1">
        <!--    1.图片-->
        <div>
          <van-image
              round
              width="6rem"
              height="6rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <!--    2.登录表单-->
        <div>
          <div >
            <van-field v-model="user.phone" label="手机号"  @change="checkCode()" placeholder="请输入手机号" />
            <van-field
                v-model="user.code"
                center
                clearable
                @change="checkRcode()"
                label="验证码"
                placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button size="small" type="primary" @click="sendCode()">发送验证码</van-button>
              </template>
            </van-field>
            <div style="margin: 30px;">
              <van-button round block type="primary" @click="loginCode()" >登录</van-button>
            </div>
          </div>

        </div>
        <div class="dv3">
          <van-row>
            <van-col span="8">
              <span><router-link to="/lin"><span style="font-size: 15px">账号密码登录</span></router-link></span>
            </van-col>
            <van-col span="12">

            </van-col>
            <van-col span="4">
              <span><router-link to="/find"><span style="font-size: 15px">忘记密码？</span></router-link></span>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  name: "Logto",
  data() {
    return {
      user:{
        phone: "",
        code: ""
      }
    }
  }, methods: {
    checkCode(){
      //校验手机号 Axios使用
      this.axios.get("/api/user/checkphoney.do?phone=" + this.user.phone).then((res) => {
        if (res.data.code == 200) {
          alert("可用！");
        } else {
          alert("手机号不存在！");
        }
      })
    },
    sendCode(){
      this.axios.get("/api/sms/Sendlcode.do?phone=" + this.user.phone).then((res) => {
        if (res.data.code == 200) {
          alert("发送成功");
        } else {
          alert("发送失败：" + res.data.msg);
        }
      })
    },
    checkRcode(){
      this.axios.post("/api/sms/checkrcode.do", {phone:this.user.phone,code:this.code}).then((res) => {
        if (res.data.code == 200) {
          // alert("发送成功");
        } else {
          alert("验证码错误");
        }
      })
    },
    //账号和验证码登录
    loginCode() {
      console.log(this.user)
      this.axios.post("/api/user/logincode.do", this.user).then(res => {
        console.log(res.data)
        if (res.data.code == 200) {
          //登录成功
          this.$toast("登录成功！");
          //更改Vuex中的值吗
          this.$store.commit("setToken", res.data.data);
          // 跳转首页 vue-router
          this.$router.push("/my");
        } else {
          this.$toast(res.data.msg);
        }
      })
    },
  tzreg(){
      this.$router.push("/register");
    }
  }
}
</script>

<style scoped>

</style>